<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="圈子管理" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>
		
		<view class="nav_box"></view>
		
		<view class="container">
			<u-grid :col="2">
				<u-grid-item v-for="(item,index) in list" :key="index">
					<view class="circle">
						<view class="image">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>
						<view class="name flex_center">
							<view class="nickname hidden">{{ item.name || '' }}</view>
							<image :src="$util.prefix('circle/qi_icon.png')" mode="aspectFill" class="icon"
								v-if="item.owner_auth_status == 2 || item.owner_auth_status == 1"></image>
							<image :src="$util.prefix('circle/v_icon.png')" mode="aspectFill" class="icon"
								v-else-if="item.owner_auth_status == 3"></image>
						</view>
						
						<view class="tags flex_center">
							<view class="avatar-list flex_center">
								<image :src="val" mode="aspectFill" v-for="(val,i) in item.circle_member_avatar" :key="i"></image>
							</view>
							
							<text>{{ item.people_num > 10000 ? `${(item.people_num / 10).toFixed(2)}万` : item.people_num }}人</text>
						</view>
						
						<view class="sign hidden">
							{{ item.desc }}
						</view>
						
						<view class="bottom flex_r_between">
							<view class="commission">
								抽成:{{ item.commission }}%
							</view>
							
							<view class="btn flex_r_around" @click="exitCircle(item)">
								<text>退出圈子</text>
							</view>
						</view>
						
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				total: 1,
			}
		},
		methods: {
			getStoreJoinCircle(){
				this.$get('/circle.circle_store/getStoreJoinCircle').then(res=>{
					this.list.push(...res.data);
				});
			},
			
			refreshList(){
				this.list = [];
				this.page = 1;
				this.total = 1;
				this.getStoreJoinCircle();
			},
			
			exitCircle(item){
				this.$get('/circle.circle_store/exitCircle',{
					circle_id: item.circle_id
				}).then(res=>{
					this.$util.msg(res.msg);
					this.refreshList();
				})
			},

		},
		
		onLoad() {
			this.refreshList();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		padding: 32rpx 12rpx;
		background: #F1F1F1;
	}
	
	.nav_bar {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/newstore/new_store_background.png) 0 0 no-repeat;
		background-size: 100%;
	
		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}
	
	.circle {
		width: 352rpx;
		height: 604rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
		
		.image {
			width: 352rpx;
			height: 352rpx;
			image {
				width: 352rpx;
				height: 352rpx;
			}
		}
		
		.name {
			padding: 16rpx 16rpx 8rpx;
			.nickname {
				max-width: 200rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
			
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	
		.tags {
			padding: 0 16rpx;
			.avatar-list {
				image {
					width: 28rpx;
					height: 28rpx;
					border-radius: 14rpx;
					margin-right: -4rpx;
				}
			}
			
			text {
				margin-left: 12rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.sign {
			padding: 8rpx 16rpx 18rpx;
			font-size: 26rpx;
			color: #999999;
			line-height: 36rpx;
		}
		
		.bottom {
			padding: 0 16rpx;
			.commission {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
			}
			
			.btn {
				width: 128rpx;
				height: 40rpx;
				background: #FD2A53;
				border-radius: 20rpx;
				
				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	
	}
	
</style>
